Icons

You can use the Miro icons by adding class .icon + .icon-eye, eye in this case is the icon name.

<span class="icon icon-eye"></span>

Click an icon to copy the classname to your clipboard.

Including icons in HTML

The SVG files are in the ./icons directory inside the NPM package. To use the SVG icon right away, copy the file(s) you need to your project.

For example, if you want to make a header with the arrow-line-shape icon inside of it:

<h2 class="my-header">
	<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path d="m14.293 8.293-11 11a1 1 0 1 0 1.414 1.414l11-11L18 12l3-9-9 3 2.293 2.293Z" />
	</svg>
	Header
</h2>

.my-header svg {
	width: 20px;
	height: 20px;
	display: inline-block;
}

Colors

While you shouldn't need to change the colors of the Icons, if you need to change an icons' color, you have to use CSS filters. We use the CSS background-image property to add the icon to a HTML element, which doesn't accept a color parameter. With this approach, colors aren't always 100% accurate.

.your-icon {
	filter: invert(18%) sepia(73%) saturate(4904%) hue-rotate(355deg) brightness(108%) contrast(126%);
}

Another option is to include the SVG markup in your HTML and using CSS fill="your-color" to alter the colors.